<nz-layout class="install">
  <nz-header class="header">

    <nz-steps [nzCurrent]="current">
      <nz-step nzTitle="使用协议"></nz-step>
      <nz-step nzTitle="系统配置"></nz-step>
      <nz-step nzTitle="数据库"></nz-step>
      <nz-step nzTitle="历史存储"></nz-step>
      <nz-step nzTitle="完成"></nz-step>
    </nz-steps>

  </nz-header>
  <nz-content class="content">
    <div class="inner">
      <ng-container *ngIf="current == 0">
        <markdown src="/assets/install/protocol.md"></markdown>
      </ng-container>
      <ng-container *ngIf="current == 1">

        <form [formGroup]="baseForm">
          <nz-form-item>
            <nz-form-label [nzSpan]="5">节点名称</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <input nz-input formControlName="node" placeholder="" required/>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">数据路径</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <input nz-input formControlName="data" placeholder="" required/>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">端口监听</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <input nz-input formControlName="port" placeholder="" required/>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">默认密码</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <input nz-input formControlName="default_password" placeholder="" required/>
            </nz-form-control>
          </nz-form-item>
        </form>

      </ng-container>
      <ng-container *ngIf="current == 2">
        <form [formGroup]="databaseForm">
          <nz-form-item>
            <nz-form-label [nzSpan]="5">类型</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <nz-select formControlName="type">
                <nz-option nzValue="sqlite" nzLabel="SQLite"></nz-option>
                <nz-option nzValue="mysql" nzLabel="MySQL（商业版）" nzDisabled></nz-option>
                <nz-option nzValue="postgres" nzLabel="PostgreSQL（商业版）" nzDisabled></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">地址</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <input nz-input formControlName="url" placeholder="" required/>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">同步表结构</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <nz-switch formControlName="sync"></nz-switch>
            </nz-form-control>
          </nz-form-item>

        </form>

        <markdown src="/assets/install/database.md"></markdown>

      </ng-container>
      <ng-container *ngIf="current == 3">

        <form [formGroup]="historyForm">
          <nz-form-item>
            <nz-form-label [nzSpan]="5">类型</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
              <nz-select formControlName="type">
                <nz-option nzValue="embed" nzLabel="内置数据库"></nz-option>
                <nz-option nzValue="influxdb2" nzLabel="InfluxDB 2.0（商业版）" nzDisabled></nz-option>
                <nz-option nzValue="tsengine" nzLabel="涛思数据库（商业版）" nzDisabled></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="5">参数</nz-form-label>
            <nz-form-control [nzSpan]="12" nzErrorTip="">
<!--              <app-input-yaml formControlName="options"></app-input-yaml>-->
              <app-config-editor formControlName="options"></app-config-editor>
            </nz-form-control>
          </nz-form-item>
        </form>

        <markdown src="/assets/install/history.md"></markdown>

      </ng-container>
      <ng-container *ngIf="current == 4">

        <markdown src="/assets/install/finish.md"></markdown>

      </ng-container>
    </div>
  </nz-content>
  <nz-footer class="footer">
      <button *ngIf="current > 0" nz-button nzType="default" (click)="current = current-1">上一步</button>
      <button *ngIf="current == 0" nz-button nzType="primary" (click)="current = current+1">我已经阅读并同意</button>
      <button *ngIf="current == 1" nz-button nzType="primary" (click)="submitBase()">下一步</button>
      <button *ngIf="current == 2" nz-button nzType="primary" (click)="submitDatabase()">下一步</button>
      <button *ngIf="current == 3" nz-button nzType="primary" (click)="submitHistory()">下一步</button>
      <button *ngIf="current == 4" nz-button nzType="primary" (click)="install()">完成安装</button>
  </nz-footer>
</nz-layout>

